<script lang="ts">
import { GameSwiperContainer } from '~comp-b/game';
import { GameSearchLoading } from '~/composables/useGameLoading';

// 猜你喜欢接口
function useRecommendQuery() {
  const params = reactive({
    type_code: {
      value: 'hot',
    },
    page_size: {
      value: 30,
    },
    page: {
      value: 1,
    },
  });
  // todo 暂无接口暂时这样写  猜你喜欢接口
  const [recommendGameQry, recommendGameParams] = useFilterInfiniteQuery(apis.apiGameList, params);
  const recommendGameList = computed(() => recommendGameQry?.data.value?.pages[0]?.list ?? []);
  return {
    recommendGameList,
    recommendGameQry,
    recommendGameParams,
  };
};
</script>

<script setup lang="ts">
const { recommendGameQry, recommendGameList } = useRecommendQuery();
</script>

<template>
  <!-- 猜你喜欢 -->
  <div>
    <div class="flex-between">
      <div class="flex-center justify-start text-4 font-600">
        <i class="i-local:hot-picks mr-1 text-[1.3em]" /> <span>{{ $t('o3U7K97l1DOa78PBlBxIg') }}</span>
      </div>
      <div class="flex-center justify-end gap-2.5 text-2xl">
        <span class="recommend-prev h-8.5 w-6 flex-center cursor-pointer">
          <i class="i-ri:arrow-left-s-line text-sys-text-body" />
        </span>
        <span class="recommend-next h-8.5 w-6 flex-center cursor-pointer">
          <i class="i-ri:arrow-right-s-line text-sys-text-body" />
        </span>
      </div>
    </div>
    <TSuspenseView v-bind="buildSvPropsOfQuery(recommendGameQry)">
      <GameSwiperContainer :navigation="{ nextEl: '.recommend-next', prevEl: '.recommend-prev' }" bg="#1D1E24">
        <swiper-slide v-for="item in recommendGameList" :key="item.code" class="py-2">
          <TGameCover class="w-full" :detail="item" />
        </swiper-slide>
      </GameSwiperContainer>

      <template #pending>
        <GameSearchLoading />
      </template>
    </TSuspenseView>
  </div>
</template>
